<template>
  <div class="box">
    <!-- 质量控点 -->
    <div class="titleNodeBox">
      <div v-for="(itx,idx) in itemList" :key="idx" class="checkDetailsBox">
        <ul>
          <li>
            <span>检验项目</span>
            <b>{{ itx.itemName }}( {{ itx.itemCode }})</b>
          </li>
          <li>
            <span>检验要求</span>
            <b>
              <van-cell-group v-if="itx.requirements">
                <van-field v-model="itx.requirements" rows="3" disabled autosize type="textarea" />
              </van-cell-group>
              <span v-else>--</span>
            </b>
          </li>
          <li>
            <span>检验说明</span>
            <b>
              <van-cell-group>
                <van-field v-model="itx.checkExplain" disabled rows="3" size="mini" autosize type="textarea" maxlength="200" show-word-limit />
              </van-cell-group>
            </b>
          </li>
          <li v-show="displayNum !== 1">
            <div class="leftBox">
              <span>上差</span>
              <b>{{ itx.upperDifference }}</b>
            </div>
            <div class="rightBox">
              <span>下差</span>
              <b>{{ itx.lowerDifference }}</b>
            </div>
          </li>
          <li>
            <span>检验工具</span>
            <b><em>{{ itx.itemToolEntityList.map(item => item.toolName).toString() }}</em></b>
          </li>
          <li>
            <span>检验值</span>
            <b>
              {{ itx.checkVal }}
            </b>
          </li>
          <li>
            <span>检验结果</span>
            <b>
              {{ itx.checkResult === null ? '' : itx.checkResult === 1 ? '合格':'不合格' }}
            </b>
          </li>
          <li>
            <div class="liDiv">
              <van-cell-group v-if="itx.itemFileEntityList">
                <van-uploader v-model="itx.itemFileEntityList" max-count="3" :deletable="false" disabled />
              </van-cell-group>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QualityControl',
  props: {
    itemList: {
      type: Array,
      default: function () {
      }
    },
    displayNum: {
      type: String(),
      default: function () {
      }
    }
  },
  data () {
    return {
      // activeNames: [0]
    }
  },
  computed: {
  },
  async mounted () {
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.checkDetailsBox{
  padding-bottom: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  width:100%;
  position: relative;
  .imgClass{
    width: 141px;
    height: auto;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 9;
    img{
      width: 100%;
      height: auto;
    }
  }
  ul{
    li{
      overflow: hidden;
      height: auto;
      padding: 10px 0;
      font-size: 22px;
      background: #f5f5f5;
      .leftBox{
        width: 50%;
        float: left;
      }
      .rightBox{
        width: 50%;
        float: left;
      }
      .liDiv{
        padding: 0 10px;
      }
      span{
        display: block;
        width: 130px;
        float: left;
        text-align: center;
        margin-right: 10px;
        // border-right:1px solid #ccc ;
      }
      b{
        width: calc(100% - 150px);
        margin-right: 10px;
        display: block;
        float: left;
        font-weight: normal;
        em{
          font-style: normal;
          padding: 0 6px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.checkDetailsBox{
  ul{
    li{
      b{
        .van-field__control{
          font-size: 18px !important;
        }
        .van-radio__icon{
          .van-icon{
            width:30px;
            height: 30px;
            line-height: 30px;
          }
        }
      }
    }
  }
}
</style>
